
<template>
    <div id="AddGoods">
  <el-form label-width="80px" :model="AddGoodsForm" ref="AddGoodsForm" :rules="AddGoodsRules">
  <el-form-item label="商品名称"  prop="goodsname"><el-input class="active-name" v-model="AddGoodsForm.goodsname"></el-input></el-form-item>
  <el-form-item label="商品图片" prop="goodspicture" >
<el-image style="width: 100px; height: 100px" :src="imgUpload.imgSrc?imgUpload.imgSrc:'https://cp1.douguo.com/upload/tuan/7/8/6/448_78ff76f474e6934eb9dd23ffdd349206.jpg'"></el-image>
 <div class="goods-img">
   <input type="file" accept="image/*" @change="showImg()" ref="img">
            <img v-if="imgUpload.imgShow"  alt="">
            <div v-if="imgUpload.uploading">正在上传</div>
            <i class="el-icon-plus" @click="changeImg()" id="shuaxin"></i></div>
  </el-form-item>
  <el-form-item label="定价" prop="goodsprice"><el-input class="order-price" v-model="AddGoodsForm.goodsprice"></el-input>元</el-form-item>
  <el-form-item label="限购"  class="limitpay" prop="goodslimit"> <el-input class="order-num"  placeholder="请输入限购件数，默认不限购" v-model.number="AddGoodsForm.goodslimit"></el-input> </el-form-item>
  <el-form-item label="商品简介" prop="goodsintro"><el-input type="textarea" class="goods-intro" v-model="AddGoodsForm.goodsintro"></el-input> </el-form-item>
  <el-form-item label="库存" class="limitpay" prop="goodsstore"> <el-input class="order-price"  v-model.number="AddGoodsForm.goodsstore"></el-input>件 </el-form-item>
   <el-form-item label="类型"  prop="goodssort">
    <el-radio-group v-model="radio" @change="handlesort">
      <el-radio label="锅具">锅具</el-radio>
      <el-radio label="餐具">餐具</el-radio>
        <el-radio label="烘焙">烘焙</el-radio>
      <el-radio label="调料">调料</el-radio>
    </el-radio-group>
  </el-form-item>
   <el-form-item>
    <el-button class="save" @click="addgoods">保存</el-button>
    <el-button type="info" class="cancel">取消</el-button>
  </el-form-item>
  </el-form>
  </div>
</template>
<script>
// import cookie from '../../cookien/index'
export default {
  name: 'AddGoods',
  data () {
    const validateMoney = (rule, value, callback) => {
      if (!value) {
        callback(new Error('商品价格不能为空'))
      // eslint-disable-next-line eqeqeq
      } else if (value.indexOf('.') != -1 && value.split('.').length > 2) {
        callback(new Error('请输入正确格式的金额')) // 防止输入多个小数点
      // eslint-disable-next-line eqeqeq
      } else if (value.indexOf('.') != -1 && value.split('.')[1].length > 2) {
        callback(new Error('请输入正确的小数位数')) // 小数点后两位
      } else {
        callback()
      }
    }
    return {
      imgUpload: {
        imgShow: false,
        uploading: false,
        imgSrc: null
      },
      dialogImageUrl: '',
      dialogVisible: false,
      AddGoodsForm: {
        goodsname: '',
        goodspicture: '',
        goodsprice: '',
        goodsintro: '',
        goodssort: '',
        goodsstore: '',
        goodslimit: ''
      },
      radio: '',
      // 表单验证规则
      AddGoodsRules: {
        goodsname: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        goodspicture: [
          { required: true, message: '请上传商品图片', trigger: 'blur' }

        ],
        goodsprice: [
          { required: true, trigger: 'blur', message: '商品价格不能为空，要求保留两位小数', validate: validateMoney },
          { message: '请输入正确的格式,可保留两位小数', trigger: 'blur' }

        ],
        goodsintro: [
          { required: true, message: '请输入商品简介', trigger: 'blur' },
          { message: '请输入商品简介', trigger: 'blur' }

        ],
        goodssort: [
          { required: true, trigger: 'blur' }

        ],
        goodsstore: [
          { required: true, message: '请输入商品库存', trigger: 'blur' },
          { type: 'number', message: '输入要求是整数', trigger: 'blur' }

        ],
        goodslimit: [
          { required: true, message: '请输入商品限购', trigger: 'blur' },
          { type: 'number', message: '输入要求是整数', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 预览图片
    showImg () {
      // this指的是组件的实例对象
      var that = this
      // 借助ref将图片挂载到组件的实例对象上
      console.log(this.$refs.img)
      var f = new FileReader()
      f.readAsDataURL(this.$refs.img.files[0])
      f.onload = function () {
        //  f.result成功的读取到这个图片，将图片编码赋值给imgUpload.imgSrc
        that.imgUpload.imgSrc = f.result
      }
      // 给图片src赋完值后，改变参数将图片由隐藏变为显示
      that.imgUpload.imgShow = true
    },
    changeImg () {
      this.$refs.img.dispatchEvent(new MouseEvent('click'))
    },

    handlesort (value) {
      this.goodssort = value
      console.log(this.goodssort)
    },
    // 添加商品
    addgoods () {
      const file = this.$refs.img.files[0]
      console.log(file)
      const param = new FormData()
      param.append('multipartFile', file)
      param.append('goodsName', this.AddGoodsForm.goodsname)
      param.append('goodsPrice', this.AddGoodsForm.goodsprice)
      param.append('goodsDecription', this.AddGoodsForm.goodsintro)
      param.append('goodsLimit', this.AddGoodsForm.goodslimit)
      param.append('goodsStore', this.AddGoodsForm.goodsstore)
      param.append('goodsClassify', this.goodssort)
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          token: this.$store.state.token
        }
      }
      if (!(file && this.AddGoodsForm.goodsname && this.AddGoodsForm.goodsprice && this.AddGoodsForm.goodsintro && this.AddGoodsForm.goodslimit && this.AddGoodsForm.goodsstore && this.goodssort)) {
        this.$message('添加的商品信息不能为空！')
      } else {
        this.$axios.post('Menu/Admin/addGoods', param, config)
          .then(res => {
            console.log(res)
            console.log(res.data.message === '商品价格不合法！')
            if (res.data.code === 200) {
              this.$message.success(res.data.object)
              this.AddGoodsForm = {}
            } else if (res.data.message === '商品价格不合法！') {
              this.$message('请输入正确的商品价格格式，要求保留到小数点后两位！')
            } else {

            }
          })
          .catch(err => {
            console.log(err)
          })
      }
      // console.log(this.AddGoodsForm.goodsname)
      // console.log(this.AddGoodsForm.goodsprice)
      // console.log(this.AddGoodsForm.goodsintro)
      // console.log(this.AddGoodsForm.goodslimit)
      // console.log(this.AddGoodsForm.goodsstore)
      // console.log(this.goodssort)
      // console.log(this.goodspicture)
      // this.$axios({
      //   method: 'post',
      //   url: '/Menu/Admin/addGoods',
      //   params: {
      //     goodsName: this.AddGoodsForm.goodsname,
      //     goodsPrice: this.AddGoodsForm.goodsprice,
      //     goodsDecription: this.AddGoodsForm.goodsintro,
      //     goodsLimit: this.AddGoodsForm.goodslimit,
      //     goodsStore: this.AddGoodsForm.goodsstore,
      //     goodsClassify: this.goodssort,
      //     multipartFile: this.goodspicture
      //   },
      //   headers: {
      //     token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiMSIsImV4cCI6MTY0NjQ0NDY4NywiaWF0IjoxNjQ1ODM5ODg3LCJ1c2VySWQiOiIxIn0.1fxbQnRPT0uJdAaK2nAE9DKedY8HVfeMWqVmXmL9UOU'
      //   }
      // }).then(data => {
      //   console.log(data)
      // })
    }, // addgoods () {
    //   this.$axios({
    //     method: 'post',
    //     url: '/Menu/Admin/addGoods',
    //     params: this.AddGoodsForm
    //   }).then(data => {
    //     if (data.data.code === 501) {
    //       this.$message(data.data.message)
    //     }
    //   })
    // }

    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      console.log(this.dialogImageUrl)
      this.dialogVisible = true
    }
  }
}

</script>
<style lang="less" scoped>
#shuaxin{
  font-size: 75px;
    position: absolute;
    margin-left: -85px;
    margin-top: 12px;
    cursor: pointer;
}
.twoimgs{
  display: flex;
}
.el-form{
    margin-top: 28px;
    .active-name{
      width: 38%;
    }
    // .el-form-item{
    //   margin-bottom: 5px;
    // }
    .order-price{
      width: 10%;
      margin-right: 10px;
    }
    .order-num{
     width: 25%;
    font-size: 13px;
    }
    .goods-intro{
      width: 38%;
    }
    .save{
      background: #ff9512;
      color: #fff;
    }
    .cancel{
      color: black;
    }
    .limitpay{
      margin-top: 12px;
    }
    .el-image{
        margin-right: 12px;
    }
}
 .goods-img{
            position:relative;
            width:100px;
            height:100px;
            background:url("https://i1.douguo.com//upload/banner/1543312604.jpg");
            margin-top: -115px;
            margin-left: 120px;
            input{
                width: 100%;
                height: 100%;
                opacity: 0;
            }
            img{
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;left: 0;
            }
        }
</style>
